// 使用说明：
//   menu - Array - 必选参数
//     menu: [{
//       id: '', 可选，每个选项的唯一标识，建议加上
//       title: '', 必选，选项文本内容
//       constant: Any Type, 可选，当需要传递单个参数时直接传入，需要传入多个参数时通过对象的形式传入
//       type: 'file', 可选，当type的值为'file'时为导入功能，方法自动传入三个参数，分别为response, file, fileList（参考el-upload文件上传成功时的钩子on-success）
//       accept: '', 可选，导入功能文件类型限制
//       childer: [] 可选，子选项
//     }]
//   text - String - 可选参数（按钮文字）
//   iconClass - String - 可选参数（按钮图标）
<template>
  <div v-clickoutside="hide" class="pull-left">
    <el-button style="position: relative;" @click="onClick">
      <svg-icon
        :icon-class="iconClass"
      />
      <span>{{ text }}</span>
      <i class="el-icon-arrow-down el-icon--right" />
    </el-button>
    <el-cascader-panel
      v-if="visible"
      ref="cascader"
      :options="menu"
      :props="props"
      class="cascader_panel"
    >
      <template slot-scope="{ data }">
        <span v-if="data.methods">
          <span :class="data.type === 'file' ? 'upload' : ''" @click="visible = false">
            <el-upload v-if="data.type === 'file'" :action="Global.BASEURL" :accept="data.accept" :show-file-list="showFileList" :on-success="data.methods">
              {{ data.title }}
            </el-upload>
            <span v-else @click="data.methods(data.constant)">{{ data.title }}</span>
          </span>
        </span>
        <span v-else>{{ data.title }}</span>
      </template>
    </el-cascader-panel>
  </div>
</template>

<script>
import Clickoutside from 'element-ui/src/utils/clickoutside'
export default {
  name: 'Cascader',
  directives: { Clickoutside },
  props: {
    menu: {
      type: Array,
      default() { return [] }
    },
    iconClass: {
      type: String,
      default: 'yingyong'
    },
    text: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      visible: false,
      props: {
        value: 'id',
        label: 'title',
        children: 'childer',
        expandTrigger: 'hover'
      },
      showFileList: false
    }
  },
  methods: {
    onClick() {
      this.visible = !this.visible
    },
    hide() {
      this.visible = false
    }
  }
}
</script>

<style scoped>
.cascader_panel {
  position: absolute;
  z-index: 999;
  background-color: #fff
}
.pull-left >>> .el-cascader-node {
  padding: 0 10px;
}
.pull-left >>> .el-cascader-node__label {
  padding: 0;
}
.pull-left >>> .el-cascader-node__label span {
  width: 100%;
  display: flex;
  position: relative;
}
.upload {
  display: block !important;
  position: relative;
  width: 100%;
}
.upload >>> .el-upload {
  width: 100%;
  display: flex;
  position: relative;
}
</style>
